<template>
  <header>
    <h1 class="hospitalName">{{ hospitalName }}</h1>
      <div class="wrapper">
        <ul class ='wrapper-box'>
          <li v-for="(item,sum) in dataList"  :key='sum'>
            <span :class="{ active:index == sum }"  @click ='navgationTo(sum,item)'>{{ item.title }}</span>
          </li>
        </ul>
        <!-- <span>
          <i class = "iconfont icon-down godown" style="font-size:14px;"></i>
        </span> -->
      </div>
  </header>
</template>
<script>
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      hospitalName: "",
      current: localStorage.getItem("homeIndex") || -1,
      dataList: [
        {
          name: "/index/organizat/contentmen/homeinfo/home_info",
          title: "机构配置"
        },
        {
          name: "/index/organizat/contentmen/management/home",
          title: "功能配置"
        },
        {
          name: "/index/organizat/contentmen/thirdparty/index",
          title: "接口配置"
        },
        // {
        //   name: "/index/organizat/contentmen/banner/home",
        //   title: "Banner"
        // },
        {
          name: "/index/organizat/contentmen/medicine/list",
          title: "科室管理"
        },
        {
          name: "/index/organizat/contentmen/expert/list",
          title: "严选专家"
        },
        {
          name: "/index/organizat/contentmen/projectreservation/index",
          title: "项目预约"
        },
        {
          name: "/index/organizat/contentmen/remoteoutpatient/list",
          title: "远程门诊"
        },
        {
          name: "/index/organizat/contentmen/remoteoutpatienttype/list",
          title: "远程门诊类型"
        },
        {
          name: "/index/organizat/contentmen/remotetteleconsultation/list",
          title: "远程会诊类型"
        },
        {
          name: "/index/organizat/contentmen/servicepackage/list",
          title: "服务包管理"
        },
        {
          name: "/index/organizat/contentmen/news/home",
          title: "新闻动态"
        },
        {
          name: "/index/organizat/contentmen/informDocument/index",
          title: "告知文书"
        },
        {
          name: "/index/organizat/contentmen/formLibrary/list",
          title: "表单题库"
        },
        {
          name : "/index/organizat/contentmen/followForm/index",
          title : "随访表单"
        },
        {
          name : "/index/organizat/contentmen/drugstore/index",
          title : "合作药店配置"
        },
      ],
      scroll: null,
    };
  },
  props: ['index'],
  created(){
   },
  mounted() {
    let iv = store.state.iv;
    let salt = store.state.salt;
    let hospitalName = localStorage.getItem("hospitalName")
    if(Boolean(hospitalName)) {
        this.hospitalName = aesUtils.decrypt(
          salt,
          iv,
          "Doctortoservice",
          hospitalName
        )
    }

    let _wrapperbox = document.querySelector('.wrapper-box')
    let len = this.dataList.length;
    _wrapperbox.style.width = len * 120 + 'px'

    let wrapper = document.querySelector('.wrapper')
    this.scroll = new BScroll(wrapper, {
      scrollX: true,
      click: true
    })
    let _li = _wrapperbox.getElementsByTagName('li')
    this.scroll.scrollToElement(_li[this.current], 0, true)
  },
  methods: {
    navgationTo(index,item){
      localStorage.setItem("homeIndex", index);
      // function全局方法
      this.functionJS.queryNavgationTo(this,item.name,{hospitalName: this.hospitalName})
    },
  }
};
</script>
<style scoped lang="less">
header {
  // width: 100%;
  padding: 30px auto;
  overflow:hidden;
  .hospitalName {
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 40px;
  }
  .wrapper{
    height:40px;
    // position: relative;
  }
  .godown {
    position: absolute;
    top: 100px;
    right: 130px;
  }
  ul {
    width:300%;
    height: 40px;
    li {
      min-width:120px;
      text-align:center;
      // padding:0 2px;
      float: left;
      border-bottom: 1px solid #ddd;
      a {
        display: block;
        font-size:12px;
        color: black;
        padding: 6px 8px;
        cursor: pointer;
        user-select: none;
        border-bottom: 2px solid transparent;
        transition: all 0.5s;
      }
      a:hover {
        color: #5362e1;
        border-bottom: 2px solid #5362e1;
      }
      .active {
        color: #5362e1;
        border-bottom: 2px solid #5362e1;
      }
    }
    li:last-child {
      margin: 0;
    }
  }
}
</style>
